マウスに合わせて画像を飛び上がらせる
今回は、前回紹介した「マウスに合わせて画像が重なる順序を変化させる」をさらに発展させて、画像上にマウスが来ると画像が飛び上がって表示されるテクニックを紹介します。動きのあるホームページの例として、ぜひとも研究してみてください。

→ レイヤーを利用し、画像と影を配置する
 
今回も前回と同様に、相対位置（position:relative）のレイヤーを作成し、その中に画像を絶対位置（position:absolute）の子レイヤーとして配置します。また、「DIV」タグを利用して画像と同じサイズの影を作成しておきます。画像や影の上下配置は「z-index」で指定しますが、今回は影の「z-index」を「1」、画像の「z-index」を「2〜6」としました。このような状態で影の位置を1枚目の画像と同じ位置に指定すると、影は1枚目の画像のちょうど真下に配置され、初期状態では影が見えなくなります。なお、影や各画像には「id」を追加し、それぞれに名前を付けておくようにしてください。
<DIV style="position:relative; top:0px; left:0px ; height:320px">

<DIV id="kage"
    style="position:absolute; top:0px; left:10px; z-index:1;
        width:200px; height:150px; background-color:#AAAAAA">
</DIV>

<IMG src="photo1.jpg" id="img1"
    style="position:absolute; left:10px; top:0px; z-index:2">

<IMG src="photo2.jpg" id="img2"
    style="position:absolute; left:250px; top:20px; z-index:6">

<IMG src="photo3.jpg" id="img3"
    style="position:absolute; left:140px; top:100px; z-index:4">

<IMG src="photo4.jpg" id="img4"
    style="position:absolute; left:20px; top:140px; z-index:3">

<IMG src="photo5.jpg" id="img5"
    style="position:absolute; left:320px; top:150px; z-index:5">

</DIV>


→ onMouseOver、onMouseOuイベントでJavaScript関数を呼び出す
 
続いて、各画像にonMouseOver、onMouseOutイベントを追加し、画像を飛び上がらせるJavaScript関数「ue()」と、元の配置に戻すJavaScript関数「Shita()」を呼び出します。なお、関数「ue()」を呼び出す際は、画像の名前（id）、画像のX座標、画像のY座標を関数に引き渡すようにします。同様に、関数「shita()」を呼び出す際は、画像の名前（id）、画像のX座標、画像のY座標、画像のz-indexを引き渡します。
<DIV style="position:relative; top:0px; left:0px ; height:320px">

<DIV id="kage" style="position:absolute; top:0px; left:10px; z-index:1;
        width:200px; height:150px; background-color:#AAAAAA">
</DIV>

<IMG src="photo1.jpg" id="img1"
    style="position:absolute; left:10px; top:0px; z-index:2"
    onMouseOver="ue('img1',10,0)" onMouseOut="shita('img1',10,0,2)">

<IMG src="photo2.jpg" id="img2"
    style="position:absolute; left:250px; top:20px; z-index:6"
    onMouseOver="ue('img2',250,20)" onMouseOut="shita('img2',250,20,6)">

<IMG src="photo3.jpg" id="img3"
    style="position:absolute; left:140px; top:100px; z-index:4"
    onMouseOver="ue('img3',140,100)" onMouseOut="shita('img3',140,100,4)">

<IMG src="photo4.jpg" id="img4"
    style="position:absolute; left:20px; top:140px; z-index:3"
    onMouseOver="ue('img4',20,140)" onMouseOut="shita('img4',20,140,3)">

<IMG src="photo5.jpg" id="img5"
    style="position:absolute; left:320px; top:150px; z-index:5"
    onMouseOver="ue('img5',320,150)" onMouseOut="shita('img5',320,150,5)">

</DIV>


→ JavaScript関数「ue()」「Shita()」を作成する
 
あとは、2つのJavaScript関数「ue()」「Shita()」を作成すれば完成です。

画像を飛び上がらせる関数「ue()」では、画像があった位置（xx,yy)に影を移動し、影のz-indexを「10」に変更します。さらに画像の位置を（xx-10,yy-10）に移動し、画像のz-indexを「11」に変更します。これで、画像が少し左上に飛び上がったように見えます。そのほか、関数「ue()」では画像に赤い枠線を付ける処理も行っています。

元の配置に戻す関数「shita()」では、影のz-indexを「1」に戻し、さらに画像の位置とz-indexも元の値に戻します。影の位置は関数「ue()」で変更したままですが、画像のちょうど真下に配置されるため問題は生じません。また、画像の枠線は、枠線の太さを「0」に指定すると消去できます。
<SCRIPT language="JavaScript">
<!--

function ue(ss,xx,yy){
  document.getElementById('kage').style.left=xx;
  document.getElementById('kage').style.top=yy;
  document.getElementById('kage').style.zIndex=10;
  document.getElementById(ss).style.left=xx-10;
  document.getElementById(ss).style.top=yy-10;
  document.getElementById(ss).style.zIndex=11;
  document.getElementById(ss).style.borderStyle="solid";
  document.getElementById(ss).style.borderWidth=2;
  document.getElementById(ss).style.borderColor="red";
}

function shita(ss,xx,yy,zz){
  document.getElementById('kage').style.zIndex=1;
  document.getElementById(ss).style.left=xx;
  document.getElementById(ss).style.top=yy;
  document.getElementById(ss).style.zIndex=zz;
  document.getElementById(ss).style.borderWidth=0;
}

//-->
</SCRIPT>


�y�V���o�C��[UNLIMIT��������1�~] EC�i�r���|�C���� Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I


�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� �����������O�~�y�������������z �C�O���s�����������I �C�O�z�e��